<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='商户列表',active='shop',open='agent'">
    <header th:replace="index/fragments/header::header-bootstrap4(${title},${active},${open})"></header>
    <body class="hold-transition sidebar-mini">
        <div class="wrapper">
            <div th:replace="index/fragments/header::header-body-bootstrap4"></div>

            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <div class="container-fluid">
                        <!--         <div class="row mb-2"> -->
                        <!--           <div class="col-sm-6"> -->
                        <!--             <h1>DataTables</h1> -->
                        <!--           </div> -->
                        <!--           <div class="col-sm-6"> -->
                        <!--             <ol class="breadcrumb float-sm-right"> -->
                        <!--               <li class="breadcrumb-item"><a href="#">Home</a></li> -->
                        <!--               <li class="breadcrumb-item active">DataTables</li> -->
                        <!--             </ol> -->
                        <!--           </div> -->
                        <!--         </div> -->
                    </div><!-- /.container-fluid -->
                </section>
                <div class="modal fade" id="infoModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">添加</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12 column">
                                    <form role="form" id="insertForm">
                                        <!--                                        <div class="row">-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>SKU</label>-->
                                        <!--                                                <input type="text" value="" name="sku" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>条形码</label>-->
                                        <!--                                                <input type="text" value="" name="barcode" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="row">-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>英文名</label>-->
                                        <!--                                                <input type="text" value="" name="enName" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>中文名</label>-->
                                        <!--                                                <input type="text" value="" name="name" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>代理名称</label>
                                                <input type="text" value="" name="name" placeholder=""
                                                       class="form-control "/>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>手机号(登录账号)</label>
                                                <input type="text" value="" name="phone" placeholder=""
                                                       class="form-control "/>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>密码</label>
                                                <input type="password" value="" name="password" placeholder=""
                                                       class="form-control "/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label>备注</label>
                                                <input type="text" value="" name="remark" placeholder=""
                                                       class="form-control "/>
                                            </div>

                                        </div>
                                        <!--                                        <div class="row">-->
                                        <!--                                            <div class="form-group col-md-4">-->
                                        <!--                                                <label>长</label>-->
                                        <!--                                                <input type="number" value="" name="length" placeholder=""-->
                                        <!--                                                       class="form-control targetBalance"/>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div class="form-group col-md-4">-->
                                        <!--                                                <label>宽</label>-->
                                        <!--                                                <input type="number" value="" name="width" placeholder=""-->
                                        <!--                                                       class="form-control targetBalance"/>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div class="form-group col-md-4">-->
                                        <!--                                                <label>高</label>-->
                                        <!--                                                <input type="number" value="" name="hight" placeholder=""-->
                                        <!--                                                       class="form-control targetBalance"/>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="row">-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>品牌</label>-->
                                        <!--                                                <input type="text" value="" name="brand" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div class="form-group col-md-6">-->
                                        <!--                                                <label>自定义标识(单位)</label>-->
                                        <!--                                                <input type="text" value="" name="record" placeholder=""-->
                                        <!--                                                       class="form-control targetName"/>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="row">-->
                                        <!--                                            <div class="form-group col-md-12">-->
                                        <!--                                                <label>图片</label>-->
                                        <!--                                                <input type="number" value="0" name="image" placeholder=""-->
                                        <!--                                                       class="form-control targetPrice"/>-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="insertInfo()">保存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>

                <div class="modal fade" id="infoModal2">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">编辑</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12 column">
                                    <form role="form" id="updateForm">
                                        <input type="hidden" value="" name="id" placeholder=""
                                               class="form-control e-id"/>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>商户名称</label>
                                                <input type="text" value="" name="name" placeholder=""
                                                       class="form-control e-name"/>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>手机号(登录账号)</label>
                                                <input type="text" value="" name="phone" placeholder=""
                                                       class="form-control e-phone"/>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>密码</label>
                                                <input type="password" value="" name="password" placeholder=""
                                                       class="form-control e-password"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label>备注</label>
                                                <input type="text" value="" name="remark" placeholder=""
                                                       class="form-control e-remark"/>
                                            </div>

                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="editInfo()">保存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- Main content -->
                <section class="content">


                    <div class="container-fluid">

                        <div class="row">
                            <!--                            <div class="col-12">-->
                            <!--                                <button id="select_All" class="btn btn-danger  btn-group-lg"-->
                            <!--                                        style="width:80px; float: right">全选-->
                            <!--                                </button>-->
                            <!--                                <button class="btn btn-danger btn-group-lg" id="handle_Select"-->
                            <!--                                        style="float: right; margin-right: 10px">批量处理-->
                            <!--                                </button>-->
                            <!--                            </div>-->
                            <div class="col-12">

                                <div class="card">
                                    <div class="card-body">
                                        <table id="example" class="table table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>名称</th>
                                                <th>手机号</th>
                                                <th>余额</th>
                                                <th>创建时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- /.card -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.container-fluid -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->
        </div>
        <!-- ./wrapper -->

        <div th:replace="index/fragments/footer :: footer"></div>
        <script>

            // $.fn.dataTable.ext.buttons.printSku = {
            //     className: 'new-buttons bg-primary',
            //
            //     action: function (e, dt, node, config) {
            //         console.log('print')
            //         printSku();
            //     }
            // };
            $.fn.dataTable.ext.buttons.insert = {
                className: 'new-buttons bg-info',
                action: function (e, dt, node, config) {
                    $('#infoModal').modal('show')
                }
            }

            // Datatable
            let table = $('#example').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "ajax": {
                    "url": "/admin/shop/list",
                    "dataSrc": "data",//这里是后台返回的数据对象
                    "data": function (d) {
                        let param = {};//因为服务端排序，可以新建一个参数对象

//                 param.start = d.start;//开始的序号
//                 param.length = d.length;//要取的数据的条数
                        return param;//自定义需要传递的参数。
                    }
                },
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'insert',
                        text: '添加',
                    },

                ],
//         "createdRow": function (row, data, index) {
//             /* 设置表格中的内容居中 */
//             $('td', row).attr("class", "text-center");
//         },
                //定义列: 取相应属性字段<th>ID</th>
                "columns": [
                    // {
                    //     "data": null,
                    //     "render": function (data, type, row) {
                    //         return data = '<input id="check-' + row.id + '"  class="checkOne" name="check" type="checkbox" onClick="add_Goods(this)" />'
                    //     },
                    //
                    // },
                    {
                        "data": "id",
                    },
                    {"data": "name"},
                    {"data": "phone"},
                    {"data": "balance"},
                    // {
                    //     "data": "runTime",
                    //     "render": function (data, type, row, meta) {
                    //         return  data + '分钟';
                    //     }
                    // },
                    // {
                    //     "data": "status",
                    //     "render": function (data, type, row, callback) {
                    //         //类型：0导航菜单；1操作按钮。
                    //         switch (data) {
                    //             case 0:
                    //                 return '<span class="badge bg-primary">0</span>';
                    //                 break;
                    //             case 1:
                    //                 return '<span class="badge bg-success">1</span>';
                    //                 break;
                    //         }
                    //     }
                    // },
                    {
                        "data": "createTime",
                    },
                    //操作列
                    {
                        "data": "id",
                        "render": function (data, type, row, meta) {
                            let statusBtn = '<a class="btn btn-success" onclick="updateStatus(\'' + data + '\',\'' + row.status + '\');" >管理</a>'
                            let updateBtn = '<a class="btn btn-render btn-success" data-toggle="modal" data-target="#infoModal2" onclick="getInfo(\'' + data + '\');" >编辑</a>'
                            let deleteBtn = '<a class="btn btn-render btn-danger" onclick="deleteTarget(\'' + data + '\');" >删除</a>'

                            return (updateBtn + deleteBtn);

                        }
                    }
                ],
                // columnDefs: [
                //
                //     {
                //         targets: 0,//代表第0行
                //         searchable: false,
                //         orderable: false,
                //         className: '',
                //         render: function (data, type, row) {
                //             return '<input class="checkchild" type="checkbox"/>';
                //         }
                //     }],
                // select: {
                //     style: 'multi',
                //     selector: 'td:first-child'
                // },
                // select: true,
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": " ",
                    "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",
                    "search": "搜索",
                    "processing": "载入中",
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "尾页"
                    }
                },
            });

            table.buttons().container().appendTo($('.dataTables_filter', table.table().container()));
            let ids = '';

            $(document).on("click", ".checkAll", function () {
                //prop是修改和读取dom原始属性的值
                // alert($(this).prop("checked"));   //$(this).prop("checked") 返回值为true和false
                $(".checkOne").prop("checked", $(this).prop("checked"));
                let checkOne = {}; //存放全选选中数据

                if ($(this).prop("checked")) {

                    $(".checkOne").prop("checked", true).each(function (i) {
                        // console.log($(".checkOne")[i].id)
                        let idStr = $(".checkOne")[i].id;
                        let id = idStr.slice(6)
                        ids += id + ',';
                    });
                } else {
                    //取消全选，直接把值设置为空
                    ids = "";
                }
                console.log(ids)
            });

            //获得单选，选中数据
            function add_Goods(_this) {
                let nRow = $(_this).parents('tr')[0];//得到这一行
                let aData = table.row(nRow).data();//得到这一行的json数据
                let txt = aData;
                if (_this.checked) {
                    ids += txt.id + ',';

                } else {
                    //当取消选中,把参数设置为空
                    ids = ids.replace(txt.id + ',', "");
                }
                if (ids.length == 0) {
                    $(".checkAll").prop("checked", false);
                }
                console.log(ids)
            }

            // 监听modal
            $("#infoModal2").on("hidden.bs.modal", function () {
                $('.targetId').val(0)
                $('.targetName').val('')
                $('.targetBalance').val('');
                $('.targetPrice').val(0)
            });



            // 用户信息
            function getInfo(id) {
                tale.get({
                    url: '/admin/shop/info',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        let data = res.data
                        let dataName = Object.keys(data);
                        for (let k in dataName) {
                            // console.log('.p-' + dataName[k] + ',' + data[dataName[k]])
                            $('.e-' + dataName[k]).val(data[dataName[k]])
                        }
                    }
                })
            }

            function insertInfo() {
                let data = $('#insertForm').serialize()
                Confirm.fire({
                    title: '确认保存?',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/shop/insert',
                            data: data,
                            success: function (result) {
                                if (result.code == 200) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    $('#infoModal').modal('hide');
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })
                    }
                })
            }

            // 修改信息
            function editInfo() {
                let data = $('#updateForm').serialize()
                // console.log(data)
                Confirm.fire({
                    title: '确认保存?',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/shop/update',
                            data: data,
                            success: function (result) {
                                if (result.code == 200) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    $('#infoModal2').modal('hide');
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })
                    }
                })
            }

            // 变更状态
            function updateStatus(id) {
                Confirm.fire({
                    title: '确认处理？',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/shop/check',
                            data: {
                                id: id,
                            },
                            success: function (result) {
                                if (result.code == 200) {

                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    $('#infoModal2').modal('hide');
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })
                    }
                })


            }

            //删除
            function deleteTarget(id) {
                Confirm.fire({
                    title: '确认删除？',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/shop/delete',
                            data: {id: id},
                            success: function (result) {
                                if (result.code == 200) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        });
                    }
                })


            }
        </script>
    </body>
</html>
